<template>
    <div>
        <v-dialog
            title="物业处置"
            :show.sync="dialogVisible"
            :closeOnClickModal=false
            @beforeClose="beforeClose"
            width="900px">
            <div style="padding: 5px">
                <div class="resource-manage">
                    <div class="card-box">
                        <div class="card-title">处置信息</div>
                        <el-form ref="dealInfo" :model="dealInfo" class="form-wrap" size="small" :rules="dealInfo_rules">
                            <el-form-item label="处置方式" prop="dealType">
                                <el-select v-model="dealInfo.dealType" filterable  placeholder="请选择处置方式">
                                    <el-option
                                        v-for="item in dealTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                 </el-select>
                            </el-form-item>
<!--                            <el-form-item label="处置面积(m²)" prop="dealArea">-->
<!--                                <el-input v-model="dealInfo.dealArea" placeholder="请输入处置面积" @blur="handleClickDealArea"></el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="处置收入(元)" prop="dealPrice">-->
<!--                                <el-input v-model="dealInfo.dealPrice" placeholder="请输入处置收入"></el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item label="处置时间" prop="dealDate">-->
<!--                                <el-date-picker-->
<!--                                    v-model="dealInfo.dealDate"-->
<!--                                    type="date"-->
<!--                                    value-format="yyyy-MM-dd"-->
<!--                                    format="yyyy-MM-dd"-->
<!--                                    placeholder="选择日期"></el-date-picker>-->
<!--                            </el-form-item>-->
                            <el-form-item label="备注" prop="remarks" class="end">
                                <el-input v-model="dealInfo.remarks" maxlength="50" placeholder="请输入备注">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="card-box">
                        <div class="card-title">物业信息</div>
                            <el-table
                                :data="dealRoomTab"
                                align="center">
                                <el-table-column label="序号" width="80" type="index"></el-table-column>
                                <el-table-column label="物业编码" prop="propertyCode"></el-table-column>
                                <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                                <el-table-column label="物业用途" prop="useType" :formatter="dictCh"></el-table-column>
                                <el-table-column label="建筑面积" prop="buildingArea"></el-table-column>
                                <el-table-column label="登记价" prop="suggestPrice"></el-table-column>
                            </el-table>
                    </div>
                </div>
            </div>
            <span slot="foot">
                <el-button @click="cancel()">取 消</el-button>
                <el-button @click="commit">保 存</el-button>
            </span>
        </v-dialog>
    </div>
</template>

<script>
    import { doubleValidate} from '~/utils/validate.js'
    import { getDict } from '~/utils'

    export default {
        name: "deal-room",
        mounted() {
            this.useTypes =  getDict('property_use_types')
            this.dealTypes =  getDict('deal_types')
        },
        data() {
          return {
              dealTypes: [],
              dealRoomTab: [],
              dialogVisible: false,
              dealInfo: {
                  dealType: '',
                  dealArea: '',
                  dealPrice: '',
                  dealDate: '',
                  remarks:''
              },
              dealInfo_rules: {
                  dealType: [
                      { required: true, message: "请选择处置方式", trigger: "blur" },
                  ],
                  // dealArea: [
                  //     { required: true, message: "请输入处置面积", trigger: "blur" },
                  //     { validator: doubleValidate, trigger: "change" },
                  // ],
                  // dealPrice: [
                  //     { required: true, message: "请输入处置收入", trigger: "blur" },
                  //     { validator: doubleValidate, trigger: "change" },
                  // ],
                  // dealDate: [
                  //     { required: true, message: "请选择处置日期", trigger: "blur" },
                  // ],
                  remarks: [
                      { min: 0, max: 200, message: "长度在0-200个字符串", trigger: "blur" },
                  ]
              }
          }
        },
        methods: {
            beforeClose(done) {
                this.cancel()
                done()
            },
            cancel() {
                this.dialogVisible = false
            },
            commit(){
                this.$refs['dealInfo'].validate((valid) => {
                    if (valid) {
                        let saveData = {}
                        //计算处置面积 建筑面积求和
                        let area = 0
                        this.dealRoomTab.reduce((area,pr) => Number(area) + Number(pr.buildingArea) )
                        this.dealInfo.dealArea = area
                        saveData['roomDeal'] = this.dealInfo
                        saveData['roomIds'] = this.dealRoomTab.map(rm => rm.roomId)
                        this.$emit("doDeal", saveData)
                        this.cancel();
                    }
                })

            },
            dictCh: function(row, column, cellValue){
                let columnTxt = column.property
                //物业类型
                let dict;
                if("useType" === columnTxt){
                    dict = this.useTypes.find(p => p.value == cellValue)
                }
                if(dict){
                    return dict.label
                }
                return ''
            },
            // hxf-0916-处置面积失焦校验
            handleClickDealArea() {
                let buildingArea = this.dealRoomTab.map(item => item.buildingArea)
                if (Number(this.dealInfo.dealArea) > Number(buildingArea)) {
                    this.$message.error('处置面积不能大于建筑面积！')
                    this.dealInfo.dealArea = ''
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    
    .form-wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 30px;
        padding: 16px 24px;

        .end {
            grid-column: 2 / 4;
        }
    }
</style>
